import React from 'react';
import { Row, Col, Card, Statistic, Progress, Table, Tag, Space, theme } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  EyeOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import { useTheme } from '../contexts/ThemeContext';

const Dashboard: React.FC = () => {
  const { token } = theme.useToken();
  const { currentTheme } = useTheme();

  // 模拟数据
  const statisticsData = [
    {
      title: '总用户数',
      value: 11280,
      prefix: <UserOutlined />,
      suffix: '人',
      precision: 0,
      valueStyle: { color: token.colorSuccess },
      trend: { value: 11.28, isUp: true },
    },
    {
      title: '总订单数',
      value: 8846,
      prefix: <ShoppingCartOutlined />,
      suffix: '单',
      precision: 0,
      valueStyle: { color: token.colorPrimary },
      trend: { value: 6.47, isUp: true },
    },
    {
      title: '总收入',
      value: 9280000,
      prefix: <DollarOutlined />,
      suffix: '元',
      precision: 2,
      valueStyle: { color: token.colorError },
      trend: { value: 3.12, isUp: false },
    },
    {
      title: '页面浏览量',
      value: 128460,
      prefix: <EyeOutlined />,
      suffix: '次',
      precision: 0,
      valueStyle: { color: token.colorInfo },
      trend: { value: 15.32, isUp: true },
    },
  ];

  // 最近订单数据
  const recentOrders = [
    {
      key: '1',
      orderId: 'ORD-2024-001',
      customer: '张三',
      amount: 1280.00,
      status: 'completed',
      createTime: '2024-01-15 10:30:00',
    },
    {
      key: '2',
      orderId: 'ORD-2024-002',
      customer: '李四',
      amount: 2560.00,
      status: 'pending',
      createTime: '2024-01-15 09:15:00',
    },
    {
      key: '3',
      orderId: 'ORD-2024-003',
      customer: '王五',
      amount: 890.00,
      status: 'processing',
      createTime: '2024-01-15 08:45:00',
    },
    {
      key: '4',
      orderId: 'ORD-2024-004',
      customer: '赵六',
      amount: 3200.00,
      status: 'completed',
      createTime: '2024-01-14 16:20:00',
    },
    {
      key: '5',
      orderId: 'ORD-2024-005',
      customer: '钱七',
      amount: 1560.00,
      status: 'cancelled',
      createTime: '2024-01-14 14:10:00',
    },
  ];

  const orderColumns = [
    {
      title: '订单号',
      dataIndex: 'orderId',
      key: 'orderId',
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toFixed(2)}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          completed: { color: 'green', text: '已完成' },
          pending: { color: 'orange', text: '待处理' },
          processing: { color: 'blue', text: '处理中' },
          cancelled: { color: 'red', text: '已取消' },
        };
        const statusInfo = statusMap[status as keyof typeof statusMap];
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  return (
    <div className="page-enter" style={{ padding: '0 4px' }}>
      {/* 页面标题 */}
      <div style={{
        marginBottom: 32,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <div>
          <h1 style={{
            margin: 0,
            fontSize: 32,
            fontWeight: 700,
            color: token.colorPrimary,
            letterSpacing: '-0.5px'
          }}>
            数据治理平台
          </h1>
          <p style={{
            margin: '8px 0 0 0',
            color: token.colorTextSecondary,
            fontSize: 16,
            fontWeight: 400
          }}>
            欢迎使用数据治理平台，这里是您的数据概览
          </p>
        </div>
        <div style={{
          padding: '12px 20px',
          backgroundColor: token.colorPrimaryBg,
          borderRadius: token.borderRadius,
          border: `1px solid ${token.colorPrimaryBorder}`,
          color: token.colorPrimary,
          fontSize: 14,
          fontWeight: 500,
        }}>
          {new Date().toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            weekday: 'long'
          })}
        </div>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[24, 24]} style={{ marginBottom: 32 }}>
        {statisticsData.map((item, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card
              className="card-enter hover-lift"
              style={{
                height: '100%',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%)',
                border: '1px solid rgba(0, 0, 0, 0.06)',
                borderRadius: 16,
                overflow: 'hidden',
                position: 'relative',
                animationDelay: `${index * 0.1}s`,
              }}
              styles={{
                body: {
                  padding: 24,
                  position: 'relative',
                  zIndex: 1,
                }
              }}
            >
              {/* 背景装饰 */}
              <div style={{
                position: 'absolute',
                top: -20,
                right: -20,
                width: 80,
                height: 80,
                borderRadius: '50%',
                background: `linear-gradient(135deg, ${item.valueStyle.color}20, ${item.valueStyle.color}10)`,
                zIndex: 0,
              }} />

              <div style={{
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'space-between',
                marginBottom: 16
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontSize: 14,
                    color: '#64748b',
                    fontWeight: 500,
                    marginBottom: 8,
                    textTransform: 'uppercase',
                    letterSpacing: '0.5px'
                  }}>
                    {item.title}
                  </div>
                  <div style={{
                    fontSize: 28,
                    fontWeight: 700,
                    color: '#1e293b',
                    lineHeight: 1,
                    marginBottom: 4,
                  }}>
                    {item.value.toLocaleString()}
                    <span style={{
                      fontSize: 16,
                      fontWeight: 500,
                      color: '#64748b',
                      marginLeft: 4
                    }}>
                      {item.suffix}
                    </span>
                  </div>
                </div>
                <div style={{
                  width: 48,
                  height: 48,
                  borderRadius: 12,
                  background: `linear-gradient(135deg, ${item.valueStyle.color}20, ${item.valueStyle.color}10)`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 20,
                  color: item.valueStyle.color,
                }}>
                  {item.prefix}
                </div>
              </div>

              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                padding: '8px 12px',
                background: item.trend.isUp
                  ? 'rgba(16, 185, 129, 0.1)'
                  : 'rgba(239, 68, 68, 0.1)',
                borderRadius: 8,
                border: `1px solid ${item.trend.isUp ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)'}`,
              }}>
                <div style={{
                  width: 20,
                  height: 20,
                  borderRadius: '50%',
                  background: item.trend.isUp ? '#10b981' : '#ef4444',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 10,
                  color: '#fff',
                }}>
                  {item.trend.isUp ? (
                    <ArrowUpOutlined />
                  ) : (
                    <ArrowDownOutlined />
                  )}
                </div>
                <span style={{
                  color: item.trend.isUp ? '#10b981' : '#ef4444',
                  fontWeight: 600,
                  fontSize: 13,
                }}>
                  {item.trend.value}%
                </span>
                <span style={{
                  color: '#64748b',
                  fontSize: 13,
                  fontWeight: 500,
                }}>
                  较上月
                </span>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={16}>
        {/* 系统状态 */}
        <Col xs={24} lg={8}>
          <Card title="系统状态" style={{ marginBottom: 16 }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>CPU 使用率</div>
              <Progress percent={45} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>内存使用率</div>
              <Progress percent={68} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>磁盘使用率</div>
              <Progress percent={32} />
            </div>
            <div>
              <div style={{ marginBottom: 8 }}>网络带宽</div>
              <Progress percent={78} status="active" />
            </div>
          </Card>
        </Col>

        {/* 快速操作 */}
        <Col xs={24} lg={8}>
          <Card title="快速操作" style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <Card.Grid style={{ width: '100%', textAlign: 'center' }}>
                <UserOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                <div>用户管理</div>
              </Card.Grid>
              <Card.Grid style={{ width: '100%', textAlign: 'center' }}>
                <ShoppingCartOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                <div>订单管理</div>
              </Card.Grid>
              <Card.Grid style={{ width: '100%', textAlign: 'center' }}>
                <DollarOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                <div>财务管理</div>
              </Card.Grid>
              <Card.Grid style={{ width: '100%', textAlign: 'center' }}>
                <EyeOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                <div>数据分析</div>
              </Card.Grid>
            </div>
          </Card>
        </Col>

        {/* 最近活动 */}
        <Col xs={24} lg={8}>
          <Card title="最近活动" style={{ marginBottom: 16 }}>
            <div style={{ fontSize: '14px' }}>
              <div style={{ marginBottom: '12px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ fontWeight: 'bold' }}>用户 张三 注册了账号</div>
                <div style={{ color: '#666', fontSize: '12px' }}>2分钟前</div>
              </div>
              <div style={{ marginBottom: '12px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ fontWeight: 'bold' }}>订单 ORD-2024-001 已完成</div>
                <div style={{ color: '#666', fontSize: '12px' }}>5分钟前</div>
              </div>
              <div style={{ marginBottom: '12px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ fontWeight: 'bold' }}>数据备份已完成</div>
                <div style={{ color: '#666', fontSize: '12px' }}>10分钟前</div>
              </div>
              <div style={{ marginBottom: '12px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ fontWeight: 'bold' }}>系统更新已发布</div>
                <div style={{ color: '#666', fontSize: '12px' }}>1小时前</div>
              </div>
              <div>
                <div style={{ fontWeight: 'bold' }}>新用户 李四 完成首次购买</div>
                <div style={{ color: '#666', fontSize: '12px' }}>2小时前</div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最近订单 */}
      <Card title="最近订单" style={{ marginTop: 16 }}>
        <Table
          columns={orderColumns}
          dataSource={recentOrders}
          pagination={{ pageSize: 5, showSizeChanger: false }}
          size="small"
        />
      </Card>
    </div>
  );
};

export default Dashboard;
